<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
			color: #fff;
			font-size: 30px;
			line-height: 200px;
			text-align: center;

		}
	</style>
	<script type="text/javascript">
		window.onload=function () {
			// 捉元素
			box = document.getElementById('box');
			// 捉元素
			btn = document.getElementById('btn');
			// 加事件
			// start = true;
			btn.onclick  = function () {
				if(btn.innerHTML=="开始"){
					time = setInterval(run, 10);//启动定时器
					btn.innerHTML  ="暂停"
					// start = false;
				}else{
					clearInterval(time);

					btn.innerHTML  ="开始"
					// start= true;
				}
				
			}

			w = 200;
			//定时器周期执行的
			add = true;
			
			function run() {


				if(w>400){
					add =false;
				}else if(w<200){
					add = true;
				}
				
				if(add){
					w +=5;
				}else{
					w -=5;
				}
				// 设置盒子的大小
				box.style.width=w+"px";
				box.style.height=w+"px";
			}

		}
	</script>
</head>
<body>
	<button id="btn">开始</button>
	<div id="box"></div>
</body>
</html>